<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>
<body>
    
    
<script>
// 为什么script标签放在这个位置？
// 1.保证可以获取到所有元素（DOM树构建完成）
// 2.避免JS脚本执行阻塞页面渲染

// DOMContentLoaded DOM加载完成时触发
// window.addEventListener('DOMContentLoaded',function (){
//     // 这里的代码执行时，DOM已经加载完成
// })

// load 资源加载完成时触发
// window.onload = function (){
//     // 这里的代码执行时，页面中的各种资源加载完成（CSS JS img 字体等等）
// }

// this指向：
// 1.在全局访问this，指向window对象
// 2.在函数中访问this，指向函数的调用对象（谁调用函数就指向谁）
// 3.在事件处理函数中访问this，指向添加事件的元素
// 4.在构造函数中访问this，指向创建出来的实例对象

// 事件流：
// 事件流指事件的流向，事件的执行顺序

// 涉及事件流的主要条件：
// 1.嵌套的关系
// 2.相同的事件

// 事件冒泡：事件从里到外依次执行
// 事件捕获：事件从外到里依次执行
// 都有一个特征：事件传播
// W3C标准事件流：事件先进入捕获阶段，到达目标阶段，再进入冒泡阶段

// 事件对象：
// 与事件相关的一个对象，对象中包含与事件相关的所有信息（事件类型 触发时间 触发位置 触发元素。。。）
// 当事件触发时，JS引擎调用对应的事件处理函数，并传入一个对象作为实参，这个实参就是事件对象

// 事件对象中常用的API：
// e.clientX/e.clientY 返回触发事件时的鼠标坐标（可视区中的坐标）
// e.offsetX/e.offsetY  返回触发事件时的鼠标坐标（事件目标中的坐标）
// e.pageX/e.pageY  返回触发事件时的鼠标坐标（页面中的坐标）
// e.button 返回鼠标的按键码 0 1 2
// e.which 返回鼠标的按键码 1 2 3
// e.which 返回键盘按键码（ASCII码）
// e.keyCode 返回键盘按键码（ASCII码）
// e.target 返回事件目标（事件源，是触发事件的具体元素）
// 在mouseover事件中，e.relatedTarget与事件相关的目标，表示鼠标从哪个元素来的
// 在mouseout事件中，e.relatedTarget与事件相关的目标，表示鼠标去到哪个元素
// e.preventDefault() 阻止默认行为
// return false 阻止默认行为，注意使用位置
// e.stopPropagation() 阻止事件传播

// 事件委托（事件代理）
// 子元素将事件委托给父元素来完成（嵌套的结构，相同的事件）
// 实现事件委托的原理：事件传播

// 事件委托的优点：
// 1.提高代码执行效率
// 2.可以减少注册事件，节约内存占用
// 3.动态元素无需重新添加事件

</script>
</body>
</html>